<template>
  <div>
    <card>

      <div class="flexCSB">
        <Input
          v-model="name"
          @on-change="change"
          suffix="ios-search"
          style="width:300px"
          placeholder="请输入资讯名称"
        ></Input>
        <Button type="primary" @click="create">新增资讯</Button>
      </div>
      <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
      <Page
      show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />

      <Modal v-model="modal" title="资讯编辑" width="50">
        <Form ref="form" :model="newData" :label-width="120">
          <FormItem label="资讯标题：">
            <Input v-model="newData.title" placeholder="请输入资讯标题"></Input>
          </FormItem>
          <FormItem label="资讯来源：">
            <Input v-model="newData.source" placeholder="请输入资讯来源"></Input>
          </FormItem>
          <FormItem label="资讯类型：">
            <Input v-model="newData.type" placeholder="请输入资讯类型"></Input>
          </FormItem>
          <FormItem label="资讯作者：">
            <Input v-model="newData.author" placeholder="请输入资讯作者"></Input>
          </FormItem>
          <FormItem label="资讯发布日期：">
            <DatePicker type="date" :clearable="false" v-model="newData.publishDate" :editable="false" placeholder="请选择日期" style="width: 100%"></DatePicker>
          </FormItem>
          <FormItem label="资讯图片：">
            <vue-uploadimg :imgUrl="imgUrl" :clear="clear" style="width:400px" @uploadImg="uploadImg"></vue-uploadimg>
          </FormItem>
          <FormItem label="资讯内容：">
            <vue-tinymce v-if="!loading1" :value="newData.htmlContent" @catchData="catchData"></vue-tinymce>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button class="Button" type="warning" @click="modal=false">关闭</Button>
          <Button class="Button" type="primary" @click="submit" :loading="loading2">确认提交</Button>
        </div>
      </Modal>

    </card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading1: false,
        loading2: false,
        data: [],
        total: 0,
        current: 1,
        columns: [
          {
            title: "标题",
            key: "title",
            align: "center",
          },
          {
            title: "作者",
            key: "author",
            align: "center",
          },
          {
            title: "浏览量",
            key: "clicks",
            align: "center",
          },
          {
            title: "操作",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary"
                    },
                    on: {
                      click: () => {
                        this.update(params);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error"
                    },
                    style:{
                      marginLeft: '10px'
                    },
                    on: {
                      click: () => {
                        this.del(params);
                      }
                    }
                  },
                  "删除"
                )
              ]
            );
          }}
        ],
        size: 10,
        name: '',
        newData:{
          author: "",
          htmlContent: "",
          imagePath: "",
          publishDate: "",
          source: "",
          title: "",
          type: ""
        },
        modal: false,
        imgUrl: '',
        clear: false,
        id: '',



      }
    },
    created(){
      this.getArticle()
    }, 
    methods:{
      create(){
        this.newData = {
          author: "",
          htmlContent: "",
          imagePath: "",
          publishDate: "",
          source: "",
          title: "",
          type: ""
        }
        this.modal = true
      },
      getArticle(){
        this.loading1 = true;
        this.$http(
          "/stage/article/getArticle",
          {
            current: this.current,
            name: this.name,
            size: this.size
          },
          "post",
          res => {
            this.loading1 = false;
            if (res.data.code == 200) {
              this.total = res.data.data.total
              this.data = res.data.data.records
            } else {
              this.$Message.error(res.data.msg);
            }
          }
        );
      },
      change(){
        this.current = 1
        this.getArticle()
      },
      changePage(data){
        this.current = data
        this.getArticle()
      },
      submit(){
        console.log(this.newData)
        for(let i in this.newData){
          if(! this.newData[i]){
            this.$Message.error('表单需填完');
            return false
          }
        }
        let data = {
          author: this.newData.author,
          htmlContent: this.newData.htmlContent,
          imagePath: this.newData.imagePath,
          publishDate: this.getTime(this.newData.publishDate),
          source: this.newData.source,
          title: this.newData.title,
          type: this.newData.type
        }
        if(this.id){
          data.id = this.id
          this.loading2 = true;
          this.$http(
            "/stage/article/updateArticle",
            data,
            "post",
            res => {
              this.loading2 = false;
              if (res.data.code == 200) {
                this.$Message.success('编辑成功');
                this.modal = false
                this.getArticle()
              } else {
                this.$Message.error(res.data.msg);
              }
            }
          );
        }
        else{
          this.loading2 = true;
          this.$http(
            "/stage/article/publishArticle",
            data,
            "post",
            res => {
              this.loading2 = false;
              if (res.data.code == 200) {
                this.$Message.success('编辑成功');
                this.modal = false
                this.getArticle()
              } else {
                this.$Message.error(res.data.msg);
              }
            }
          );
        }
      }, 
      uploadImg(data){
        this.newData.imagePath = data
      },
      catchData(data){
        this.newData.htmlContent = data
      },
      update(data){
        this.newData = {
          author: data.row.author,
          htmlContent: data.row.htmlContent,
          imagePath: data.row.imagePath,
          publishDate: data.row.publishDate,
          source: data.row.source,
          title: data.row.title,
          type: data.row.type
        }
        this.imgUrl = data.row.imagePath
        this.modal = true
        this.id = data.row.id
      },
      del(data){
        this.$Modal.confirm({
          title: "提示",
          content:
            "<p>确定要删除资讯<strong> " +
            data.row.title +
            " </strong>吗？</p>",
          onOk: () => {
            this.loading1 = true;
            this.$http(
              "/stage/article/deleteArticle",
              {
                id: data.row.id
              },
              "get",
              res => {
                if (res.data.code == 200) {
                  this.$Message.success("删除资讯成功");
                  this.current = 1;
                  this.getArticle();
                } else {
                  this.$Message.error(res.data.msg);
                }
              }
            );
          }
        });
      }




    },
    
  }
</script>

<style scoped>

</style>